<template>
  <div class="real_time">
    <!--第一行-->
    <div class="first">
      <div>
        <!-- 现有确诊，无症状感染者 -->
        <div id="xyqz_container" style="height:100%;"></div>
      </div>
      <div>
        <!-- 国内治愈率 -->
        <div id="zyl_container" style="height:100%;"></div>
      </div>
      <div>
        <!-- 确诊城市TOP10 -->
        <div id="city_container" style="height:100%;"></div>
      </div>
    </div>
    <!--第二行-->
    <div class="second">
      <div id="qz_container" style="height:100%;"></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    //现有确诊，无症状感染者
 var chart = Highcharts.chart('xyqz_container', {
	chart: {
		type: 'spline'
	},
	title: {
		text: '现有确诊，无症状感染者'
	},
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月',
					 '七月', '八月']
	},
	yAxis: {
		title: {
			text: '确诊人数'
		},
	},
	tooltip: {
		crosshairs: true,
		shared: true
	},
	plotOptions: {
		spline: {
			marker: {
				radius: 4,
				lineColor: '#666666',
				lineWidth: 1
			}
		}
	},
	series: [ {
		name: '中国',
		marker: {
			symbol: 'diamond'
		},
		data: [
       0, 5,15,60,175, 299,340, 365]
	}]
});

    //国内治愈率

    var chart = Highcharts.chart('zyl_container', {
	title: {
		text: '国内治愈率'
	},
	//				subtitle: {
	//					text: '数据来源：thesolarfoundation.com'
	//				},
	yAxis: {
		title: {
			text: '治愈率'
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'middle'
	},
	xAxis: {
		categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
	},
	series: [{
		name: '中国',
		data: [0, 0, 9, 12, 18, 25, 32, 34, 57, 75, 82, 91],
		zoneAxis: 'x',
		zones: [{
			value: 2,
			dashStyle: 'dot'
		},{
			value: 12,
			dashStyle: 'dot'
		}]
	}]
});

    //全国确诊病例TOP10
    var chart = Highcharts.chart("city_container", {
      chart: {
        type: "column",
      },
      title: {
        text: "确诊省份TOP10",
      },
      subtitle: {
        text: "数据来源: WorldClimate.com",
      },
      xAxis: {
        categories: [
          "香港",
          "四川",
          "上海",
          "广东",
          "天津",
          "云南",
          "黑龙江",
          "内蒙古",
          "北京",
          "陕西",
        ],
        crosshair: true,
      },
      yAxis: {
        min: 0,
        title: {
          text: "确诊人数",
        },
      },
      tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat:
          '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
        footerFormat: "</table>",
        shared: true,
        useHTML: true,
      },
      plotOptions: {
        column: {
          borderWidth: 0,
        },
      },
      series: [
        {
          name: "中国",
          data: [
            524,
            20,
            74,
            22,
            14,
            8,
            1,
            2,
            0,
            12,
          ],
        },
        
      ],
    });

    //全国新增病例
    var chart = Highcharts.chart("qz_container", {
      chart: {
        type: "area",
      },
      title: {
        text: "全国新增确诊病例",
      },
      subtitle: {
        text:
          '数据来源: <a href="https://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
          "thebulletin.metapress.com</a>",
      },
      xAxis: {
        allowDecimals: false,
      },
      yAxis: {
        title: {
          text: "新增确诊人数",
        },
        labels: {
          formatter: function () {
            return this.value / 1000 + "k";
          },
        },
      },
      tooltip: {
        pointFormat: "{series.name} 新增 <b>{point.y:,.0f}</b>位新冠肺炎患者",
      },
      plotOptions: {
        area: {
          pointStart: 1,
          marker: {
            enabled: false,
            symbol: "circle",
            radius: 2,
            states: {
              hover: {
                enabled: true,
              },
            },
          },
        },
      },
      series: [
        {
          name: "中国",
          data: [
            6,
            11,
            32,
            110,
            235,
            369,
            640,
            1005,
            1436,
            2063,
            1700,
            1200,

          ],
        },
        {
          name: "新疆",
          data: [
            null,
            null,
            5,
            25,
            50,
            120,
            230,
            360,
            456,
            850,
            1200,
            900,
          ],
        },
      ],
    });
  },
};
</script>

<style scoped>
/* 第一行 */
.real_time > .first {
  display: flex;
  height: 300px;
  text-align: center;
}
.real_time > .first > div {
  flex: 1;
}
/* 第二行 */
.real_time > .second {
  height: 500px;
  text-align: center;
}
</style>